<template>
  <div class="vote-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>投票管理</span>
          <div class="header-actions">
            <el-input
              v-model="searchText"
              placeholder="搜索投票标题"
              style="width: 200px; margin-right: 10px;"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button type="primary" @click="handleCreate">
              <el-icon><Plus /></el-icon>
              新建投票
            </el-button>
            <el-button @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table :data="voteList" v-loading="loading" stripe>
        <el-table-column prop="title" label="投票标题" min-width="200" show-overflow-tooltip />
        
        <el-table-column prop="totalVotes" label="投票数" width="100" align="center">
          <template #default="scope">
            <el-tag type="info">{{ scope.row.totalVotes || 0 }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="startTime" label="开始时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.startTime) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="endTime" label="结束时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.endTime) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleViewResults(scope.row)">
              查看结果
            </el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Plus, Refresh } from '@element-plus/icons-vue'

const voteList = ref([])
const loading = ref(false)
const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 模拟数据
const mockVotes = [
  {
    _id: '1',
    title: '最受欢迎的文化活动投票',
    totalVotes: 156,
    startTime: '2024-01-01T00:00:00.000Z',
    endTime: '2024-01-31T23:59:59.000Z',
    status: 'active'
  },
  {
    _id: '2',
    title: '下学期课程安排意见征集',
    totalVotes: 89,
    startTime: '2024-01-15T00:00:00.000Z',
    endTime: '2024-02-15T23:59:59.000Z',
    status: 'ended'
  }
]

const getVoteList = async () => {
  loading.value = true
  try {
    // 这里应该调用实际的API
    // const result = await CloudBaseAPI.getVoteList(currentPage.value, pageSize.value, searchText.value)
    
    // 模拟API调用
    setTimeout(() => {
      voteList.value = mockVotes
      total.value = mockVotes.length
      loading.value = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取投票列表失败')
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  getVoteList()
}

const handleRefresh = () => {
  searchText.value = ''
  currentPage.value = 1
  getVoteList()
}

const handlePageChange = () => {
  getVoteList()
}

const handleSizeChange = () => {
  currentPage.value = 1
  getVoteList()
}

const handleCreate = () => {
  ElMessage.info('新建投票功能开发中...')
}

const handleEdit = (vote) => {
  ElMessage.info('编辑投票功能开发中...')
}

const handleDelete = (vote) => {
  ElMessage.info('删除投票功能开发中...')
}

const handleViewResults = (vote) => {
  ElMessage.info('查看投票结果功能开发中...')
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

const getStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'active': 'success',
    'ended': 'info',
    'cancelled': 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '未开始',
    'active': '进行中',
    'ended': '已结束',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知'
}

onMounted(() => {
  getVoteList()
})
</script>

<style scoped>
.vote-management {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>